<template>
  <el-container>
    <el-main>
  <div width="2000px" class="div1">
    
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="二维码内容">
        <el-input v-model = "form.msg" :width = "100" ></el-input>
      </el-form-item>
      <el-form-item label="二维码背景色">
        <!-- <el-color-picker v-model="form.color" show-alpha></el-color-picker> -->
        <el-color-picker v-model="form.color"></el-color-picker>
      </el-form-item>
      <el-form-item label="二维码前景色">
        <el-color-picker v-model="form.bcolor"></el-color-picker>
      </el-form-item>
      <el-form-item label="二维码名称">
      <el-input v-model = "form.name"></el-input>
      </el-form-item>
      <el-form-item label="二维码大小">
        <el-slider v-model="form.x" :min = "100" :max = "1000"></el-slider>
      </el-form-item>
    </el-form>
    <el-button @click="buildQr" >生成二维码</el-button>
    
    <el-dialog
      title="二维码预览"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-image
        style="width: 200px; height: 200px"
        v-bind:src="qrimg"
        fit="fill" :preview-src-list="srcList">
      </el-image>
      <div></div>
      <a class='download' :href='qrimg' download=""  title="下载二维码" style="margin-top: 10px">保存二维码</a>
    </el-dialog>
    
    
  </div>
    </el-main>
  </el-container>

</template>

<script>
import axios from 'axios'; 
import {GetQrcode} from '../../api/autopay'; 
import {shijianchuo} from '../../js/dates'
export default {
    name: 'getQr',
    data() {
        return {
          form : {
            msg:"",
            color: "#FFFFFF",
            bcolor: "#000000",
            x: 200,
            y: 0,
            name: ""
          },
          inishow:false,
          dialogVisible: false,
          qrimg:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
        }
    },
    methods: {
      
      buildQr: function (f) {
        this.form.y = this.form.x
        console.log(this.form);
        var shijian = shijianchuo();
        GetQrcode(this.form).then(res => {
          let { code, msg, data } = res;
          console.log(shijian);
      
          if (code == 200) {
            this.qrimg = data+"?"+shijian;
            this.srcList.push(data+"?"+shijian);
            this.dialogVisible = true;
          }
        }).catch(() => {
          this.$message.error("数据请求失败");
        });
      },
      handleClose() {
        this.$message("title","sdfdsfdd")
        this.dialogVisible = false;
        this.qrimg = "";
      },

      

    }

}
</script>

<style type="text/css">
  .div1{
    margin-left: 30%;
    width: 600px;
    height: 500px;
    padding: 10px;
    text-align: center;
    background-color: rgba(31, 147, 255, 0.11);
    margin-top: 2%;
    margin-bottom: 10%;
  }
  .sub_button{
    margin-top: 10%;
  }
</style>
